<template>
  <div class="mod-config">
    <!-- 查询条件 -->
    <div class="search-form search_form" v-loading='loadingPage'>
      <el-form :model="searchForm" size="mini" label-position="right" class="demo-form-inline" label-width="110px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="申诉部门：">
              <el-select v-model="searchForm.deptId" placeholder="请选择" filterable clearable :disabled="showDisable">
                <el-option
                  v-for="item in deptList"
                  :key="item.z00hrjgbm"
                  :label="item.z00hrjgmc"
                  :value="item.z00hrjgbm">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申诉人：">
              <el-input v-model="searchForm.appealUser" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申诉状态：">
              <el-select v-model="searchForm.appealState" placeholder="请选择" filterable clearable>
                <el-option
                  v-for="item in stateList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align:center;">
            <el-button size="mini" type="primary" @click="searchBtn">查询</el-button>
            <el-button size="mini" @click="emptyClick">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin-bottom: 10px;">
      <el-button v-hasPermi="['/appealform/oneclickapproval']" size="mini" type="primary" v-if="this.tableData.length>0"
                 @click="manySubnit">
        一键审批
      </el-button>
    </div>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @sort-change="getOrder"
      :row-key="bindRowKeys"
      style="width: 100%;">

      <el-table-column
        prop="deptName"
        header-align="center"
        align="center"
        label="部门名称">
      </el-table-column>

      <el-table-column
        prop="appealUser"
        header-align="center"
        align="center"
        label="申诉人">
      </el-table-column>
      <el-table-column
        prop="contactNumber"
        header-align="center"
        align="center"
        label="联系方式">
      </el-table-column>
      <el-table-column
        prop="appealState"
        header-align="center"
        align="center"
        label="申诉状态">
        <template slot-scope="scope">
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.appealState === 0">未审批</span>
          <span style="color: #13ce66 ;font-weight:bold" v-if="scope.row.appealState === 1">同意</span>
          <span style="color: #ff4949 ;font-weight:bold" v-if="scope.row.appealState === 2">驳回</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="level"
        header-align="center"
        align="center"
        label="员工绩效等级">
        <template slot-scope="scope">
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.level === 1">A+</span>
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.level === 2">A</span>
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.level === 3">B+</span>
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.level === 4">B</span>
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.level === 5">B-</span>
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.level === 6">C</span>
          <span style="color: #999999 ;font-weight:bold" v-if="scope.row.level === 7">D</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="description"
        header-align="center"
        align="center"
        label="申诉描述">
      </el-table-column>
      <el-table-column
        prop="createTime"
        header-align="center"
        align="center"
        label="申诉时间"
        width="150">
        <template slot-scope="scope">
          {{ new Date(scope.row.createTime).toLocaleDateString().replaceAll('/', '-') }}
        </template>
      </el-table-column>

    </el-table>
    <div class="progress_lok_page">
      <page
        :hidden="tableData && tableData.length === 0"
        :total="total"
        :page.sync="pageNo"
        :limit.sync="pageSize"
        @pagination="handlePageChange"
      />
    </div>

    <el-dialog
      :title="'审核'"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :model="senheForm" :rules="senheRule" ref="senheForm" @keyup.enter.native="senheFormSubmit()"
               label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="审核人" prop="reviewer">
              <el-input v-model="senheForm.reviewer" disabled></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="审核结果" prop="reviewerResult" style="margin-bottom: 14px; ">
              <el-select v-model="senheForm.reviewerResult" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核意见" prop="reviewerDescribe">
              <el-input type="textarea" v-model="senheForm.reviewerDescribe" placeholder="请输入审核意见"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="senheFormSubmit()">提交</el-button>
        </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import { Encrypt } from '../../utils/cryptoAES'
  import { AesDecrypt } from '../../utils/AesDecrypt'

  export default {
    data() {
      return {
        visible: false,
        deptList: [],
        showDisable: false,
        stateList: [{ id: 0, name: '未审批' },
          { id: 1, name: '同意' },
          { id: 2, name: '驳回' }
        ],
        deptIds: [],
        tableData: [],
        loadingPage: true,
        loading: true,
        currentPage: 0,
        pageNo: 1,
        pageSize: 10,
        total: 0,
        checkedArr: [],//要导出的数据数组
        searchForm: {
          deptId: '',//部门
          appealUser: '',//申诉人
          appealState: null,//申诉状态，
          ids: []
        },

        senheForm: {
          appealIds: [],
          reviewerId: '',//审核人id
          reviewer: '',// 审核人
          reviewerResult: '',//审核结果
          reviewerDescribe: ''

        },
        options: [{
          value: 2,
          label: '驳回'
        }, {
          value: 1,
          label: '同意'
        }],
        senheRule: {
          reviewer: [
            { required: true, message: '审核人不能为空', trigger: 'blur' }
          ],
          reviewerResult: [
            { required: true, message: '审核结果不能为空', trigger: 'blur' }
          ],
          reviewerDescribe: [
            { required: true, message: '审核意见不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      if (this.$route.query.deptId) {
        var deptId = this.$route.query.deptId
        this.searchForm.deptId = deptId
        this.showDisable = true
      } else {
        this.showDisable = false
      }
      this.getList ()
      this.getDeptList ()
    },
    methods: {
      // 获取列表
      getList() {
        var uu = {
          page: this.pageNo,
          pageSize: this.pageSize,
          deptId: this.searchForm.deptId,//部门
          appealUser: this.searchForm.appealUser,//申诉人
          appealState: this.searchForm.appealState//申诉状态
        }
        var jsonString = JSON.stringify (uu)
        var yy = Encrypt (jsonString)
        var encodedString = encodeURIComponent (yy)
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/appealform/list',
          data: encodedString
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            this.tableData = data.result.content
            this.total = data.result.total
            this.loading = false
            this.loadingPage = false
          } else {
            this.loading = false
            this.loadingPage = false
            this.$message.error (data.msg)
            this.tableData = []
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      // 查询
      searchBtn() {
        this.loading = true
        this.page = 1
        this.getList ()
      },
      /** 点击分页触发的事件 */
      handlePageChange(pageInfo) {
        this.loading = true
        this.pageNo = pageInfo.page
        this.pageSize = pageInfo.limit
        this.getList ()
      },
      // 清空
      emptyClick() {
        // this.searchForm.deptId = ''
        this.searchForm.appealUser = ''
        this.searchForm.appealState=''
      },

      bindRowKeys(row) {
        return row.id
      },
      // 多选
      handleSelectionChange(value) {
        this.checkedArr = value
        // element表格多选第一页选中往后翻一页全选，再回到第一页会再次选中第一页的数据，所以需要手动去重
        let hash = {}
        this.checkedArr = this.checkedArr.reduce ((preVal, curVal) => {
          hash[curVal.id] ? '' : hash[curVal.id] = true && preVal.push (curVal)
          return preVal
        }, [])
      },
      getOrder(param) {
        this.loading = true
        if (param.order === 'ascending') {
          this.searchForm.sort = 'asc'
          this.searchForm.sortField = param.prop
        } else if (param.order === 'descending') {
          this.searchForm.sort = 'desc'
          this.searchForm.sortField = param.prop
        } else {
          this.searchForm.sort = ''
          this.searchForm.sortField = ''
        }
        this.getList ()
      },

      //一键审批
      manySubnit() {
        if (this.tableData[0].appealState === 1) {
          this.$message.warning ('已同意数据，不允许审批')
          return
        }
        this.visible = true
        this.getUsers ()
      },
      // 审批
      senheFormSubmit() {
        var uu = {
          deptId: this.searchForm.deptId,
          reviewerId: this.senheForm.reviewerId,//审核人id
          reviewerResult: this.senheForm.reviewerResult,//审核结果
          reviewerDescribe: this.senheForm.reviewerDescribe,//审核意见
          reviewer: this.senheForm.reviewer
        }
        var jsonString = JSON.stringify (uu)
        var yy = Encrypt (jsonString)
        var encodedString = encodeURIComponent (yy)
        this.$refs['senheForm'].validate ((valid) => {
          if (valid) {
            axios ({
              method: 'post',
              url: '/hr-xc-human-resources-perform-manage/generator/appealform/batchAudit',
              data: encodedString
            }).then (({ data }) => {
              if (data && data.code === '00000') {
                this.visible = false
                if (data.result) {
                  this.$message.success ('审批成功')
                } else {
                  this.$message.error ('审批失败')
                }
                this.getList ()
              } else {
                this.loading = false
                this.loadingPage = false
                this.$message.error ('审批失败')
              }
            }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
          }
        })
      },
      // 审核人下拉查询
      getUsers() {
        let that = this
        axios ({
          url: '/hr-xc-human-resources-perform-manage/authUser/getCurrentUser',
          method: 'get'
        }).then (({ data }) => {
          if (data && data.code === '00000') {
            var data = AesDecrypt (data.result)
            that.senheForm.reviewerId = data.userId
            that.senheForm.reviewer = data.userName
          } else {
            that.$message.error ('获得当前登录人失败！')
          }
        }).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      getDeptList() {
        this.deptList = []
        axios ({
          method: 'post',
          url: '/hr-xc-human-resources-perform-manage/generator/torgdept/list'
        }).then (({ data }) => {
            if (data && data.code === '00000') {
              var data = AesDecrypt (data.result)
              data.forEach (v => {
                this.deptList.push (v)
              })
            }
          }
        ).catch(error => {
          this.$message.error ('服务器访问异常，请从新登录')
        });
      },
      getLable(val) {
        let aa = val.split (',')
        this.senheForm.reviewer = aa[1]
      }
    }
  }
</script>

<style scoped>

  .el-textarea {
    width: 89.5%;
  }
</style>
